iT邦幫忙

2023 iThome 鐵人賽

DAY 27
0
Odoo

Odoo 魔法學院: 一步一腳印帶你成為客製化大師系列 第 27

[Day27] 使用QWeb 指令對Kanban View進行更改

  • 分享至 

  • xImage
  •  

今天會來學習怎麼使用 QWeb 指令如何操作,使用計算表達式來產生取決於記錄值的不同效果。用於計算這些表達式的語言取決於 QWeb 的執行環境。有兩種不同的 QWeb 環境:客戶端 JavaScript 和伺服器端 Python。那有哪些指令呢?

t-out

將程式碼表達式的結果呈現為 HTML 轉義值

<t t-out="'Requested on ' + record.request_date.value" />

t-set

來設定的變數名稱 t-value 設定其計算結果

<t t-set="red_or_black"
   t-value="record.num_books == 0 ? '' : 'oe_kanban_text_red'"
/>

也可以內部的 HTML 指派給 calendar_sign 變數,在使用 t-out來顯示

<t t-set="calendar_sign">
  <i class="fa fa-calendar" title="Calendar" />
 </t>
 <t t-out="calendar_sign" />

t-att

可以即時計算並產生輸出值
如果優先順序較高,將請求日期的顏色變更為紅色字母。

<div t-att-class="record.priority.raw_value &lt; '2'
  ? 'oe_kanban_text_black' : 'oe_kanban_text_red'">
  <field name="request_date"/>
</div>

t-foreach

做一個循環 + t-as 設定用於每個指定值的變數名稱。
新增書籍封面圖像到每個結帳行中,先到models/library_checkout_line.py

book_cover = fields.Binary(related="book_id.image")

再到library_checkout/views/checkout_kanban_vieww.xml

<div>
     <t t-foreach="record.line_ids.raw_value.slice(0, limit)" t-as="line">
       <img t-att-src="kanban_image('library.checkout.line', 'book_cover', line)"
          class="oe_avatar" height="60" alt="Cover" />
        </t>
      </div>

t-if

當條件為 true 時,才會呈現其內容。
顯示借閱書籍的結帳數量

 <div t-if="record.num_books.raw_value == 0">
 No books!
</div>
 <div t-elif="record.num_books.raw_value == 1">
 One book
 </div>
<div t-else="">
<field name="num_books"/> books
 </div>

提供自己的 CSS。
另外Kanban views 主要都是使用 HTML 跟 CSS組合而成,如果想要提供自己的CSS,
到__manifest__.py:

"assets": {  
       "web.assets_backend": {
           "library_checkout/static/src/css/checkout.css",
           "library_checkout/static/src/js/checkout.js",
       }
   }

通常都會放在這邊 /static/src。


上一篇
[Day26] 管理工作表的Kanban View+搜尋特定選項的Search View
下一篇
[Day28] 客製化 PDF 輸出
系列文
Odoo 魔法學院: 一步一腳印帶你成為客製化大師30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言